import React, { Fragment } from 'react'
import { Tabs, Collapse, Select, Form, Switch, Radio, Input } from 'antd'
import { useRecoilState } from 'recoil'
import { designerState } from '../../../../../store'
import MetaWrapper from '../../../../dnd/MetaWrapper'
import { produce } from 'immer';

const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}

interface IProps {
  children?: any;
}

export default function DynamicChartConfig (props: IProps) {
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

  // 更新选中节点
  const updateAttr = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.attr[key] = value
    })
    setSelectedNode(newItem)
  }

  // 更新样式
  const updateStyle = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.style[key] = value
    })
    setSelectedNode(newItem)
  }

  // 是否开启自动轮播
  const changeBoundaryGap = (value: any) => {
    updateAttr("boundaryGap", value)
  };

  // 指示点位置
  const changeDotPosition = (e: any) => {
    updateAttr("dotPosition", e.target.value)
  };

  // 图表类型
  const changeType = (value: any) => {
    updateAttr("type", value)
  };

  // 图表标题
  const changeTitle = (e: any) => {
    updateAttr("title", e.target.value)
  };

  const handleChange = (activeKey: any) => {
    console.log(123, activeKey)
  }

  // 设置高度
  const changeStyleHeight = (e: any) => {
    updateStyle("height", e.target.value)
  };

  // 设置宽度
  const changeStyleWidth = (e: any) => {
    updateStyle("width", e.target.value)
  };

  return (
    <Fragment>
      <Tabs defaultActiveKey="2">
        <TabPane tab='元数据' key="1">
          <MetaWrapper />
        </TabPane>
        <TabPane tab='设置' key="2">
          <Collapse defaultActiveKey={['1', '2']} bordered={true} ghost={false} onChange={ handleChange }>
            <Panel header="基本属性" key="1" showArrow={false}>
              <Form
                // ref={this.form}
                {...layout}
              >
                <Form.Item label='图表标题'>
                  <Input 
                    onChange={ changeTitle }
                    placeholder="文章数量"
                    value={ selectedNode.config?.attr.title }
                  />
                </Form.Item>
                <Form.Item label='启用边框'>
                  <Switch
                    checked={ selectedNode.config.attr.boundaryGap }
                    onChange={ changeBoundaryGap }
                    checkedChildren={"是"}
                    unCheckedChildren={"否"}
                  />
                </Form.Item>
                <Form.Item label='图表类型'>
                  <Select defaultValue={ selectedNode.config?.attr.type } onChange={ changeType }>
                    <Option value="line">折线图</Option>
                    <Option value="bar">柱状图</Option>
                  </Select>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header="样式" key="2" showArrow={false}>
              <Form
                // ref={this.form}
                {...layout}
              >
                <Form.Item label='高度'>
                  <Input 
                    onChange={ changeStyleHeight }
                    value={ selectedNode.config.style.height }
                  />
                </Form.Item>
                <Form.Item label='宽度'>
                  <Input 
                    onChange={ changeStyleWidth }
                    placeholder="毫秒为单位"
                    value={ selectedNode.config.style.width }
                  />
                </Form.Item>
              </Form>
            </Panel>
          </Collapse>
        </TabPane>
        <TabPane tab='数据' key="3">
          数据内容
        </TabPane>
      </Tabs>
    </Fragment>
  )
}